<script setup>
	import { ref } from 'vue'
	import { orderDetailApi } from '@/services/medicine'
	import { paymentApi } from '@/services/payment'
	const props = defineProps({
		id: String,
	})
	// 订单状态
	const orderStatus = {
		10: '待支付',
		11: '待发货',
		12: '待收货',
		13: '已完成',
		14: '已取消',
	}
	const paymentMethods = ['微信支付', '支付宝支付']
	// custom-payment组件ref
	const payment = ref()
	const orderDetailInfo = ref([])
	function close() {
		payment.value.hidePayment()
	}
	// 获取预付订单
	async function getOrderDetail() {
		const { code, data, message } = await orderDetailApi(props.id)
		if (code !== 10000) return uni.utils.toast(message)
		orderDetailInfo.value = data
	}
	getOrderDetail()
</script>
<template>
	<scroll-page background-color="#f6f6f6">
		<view class="payment-page">
			<view class="page-header">
				<view class="order-status">
					<text class="label"
						>药品订单 {{ orderDetailInfo.actualPayment }}元</text
					>
					<text class="status">{{ orderStatus[orderDetailInfo.status] }}</text>
				</view>
				<view class="order-shippment">
					<template v-if="orderDetailInfo.status === 11">
						<view class="region">
							<uni-icons size="16" color="#FF7702" type="location-filled" />
							<text>{{ orderDetailInfo.addressInfo.city }}</text>
						</view>
						<view class="detail">
							{{ orderDetailInfo.addressInfo.addressDetail }}
						</view>
						<view class="receiver">
							{{ orderDetailInfo.addressInfo.receiver }}
							{{ orderDetailInfo.addressInfo.mobile }}
						</view>
					</template>

					<template v-if="orderDetailInfo.status === 12">
						<navigator
							:url="`/subpkg_medicine/timeline/index?orderId=${orderDetailInfo.id}`"
							hover-class="none"
						>
							<view class="info">
								<text class="pkg"
									>【{{
										orderDetailInfo.addressInfo.city
									}}】您的包裹已签收</text
								>
								<text class="time">{{ orderDetailInfo.createTime }}</text>
							</view>
							<view class="sign-right">
								<uni-icons size="18" color="#C3C3C5" type="forward" />
							</view>
						</navigator>
					</template>
				</view>
			</view>
			<view class="order-shop">
				优医药房
				<text class="alt">优医质保 假一赔十</text>
			</view>
			<view class="medicine-list">
				<view
					class="medicine-list-item"
					v-for="medicine in orderDetailInfo.medicines"
					:key="medicine.id"
				>
					<view class="content">
						<image
							:src="medicine.avatar"
							mode="aspectFill"
							class="medicine-avator"
						></image>
						<view class="medicine-info">
							<view class="info">
								<text class="name">{{ medicine.name }}</text>
								<text
									class="number"
									:class="{ symbol: medicine.prescriptionFlag === 1 }"
									>{{ medicine.specs }}</text
								>
								<text class="price">¥{{ medicine.amount }}</text>
							</view>
							<view class="quantity"> x{{ medicine.quantity }} </view>
						</view>
					</view>
					<view class="guide">用法用量：{{ medicine.usageDosag }}</view>
				</view>
			</view>
			<view class="blank"> </view>
			<uni-list :border="false">
				<uni-list-item
					title="药品金额"
					:right-text="'¥' + orderDetailInfo.payment"
				>
				</uni-list-item>
				<uni-list-item
					title="运费"
					:right-text="'¥' + orderDetailInfo.expressFee"
				>
				</uni-list-item>
				<uni-list-item
					title="优惠劵"
					show-arrow
					:right-text="`-¥${orderDetailInfo.couponDeduction}`"
				>
				</uni-list-item>
				<uni-list-item
					title="实付款"
					:right-text="'¥' + orderDetailInfo.actualPayment"
				>
				</uni-list-item>
				<uni-list-item title="订单编号" :right-text="orderDetailInfo.orderNo" />
				<uni-list-item
					title="创建时间"
					:right-text="orderDetailInfo.createTime"
				>
				</uni-list-item>
				<uni-list-item
					title="支付方式"
					:right-text="paymentMethods[orderDetailInfo.paymentMethod]"
				>
				</uni-list-item>
			</uni-list>
			<!-- 底部 -->
			<view class="toolbar">
				<view class="delete">
					<uni-icons size="18" color="#C3C3C5" type="trash" /><text
						>删除订单</text
					>
				</view>
				<view class="buttons">
					<button class="uni-button">再次购买</button>
				</view>
			</view>
		</view>
	</scroll-page>
</template>

<style lang="scss">
	.payment-page {
		padding-bottom: calc(env(safe-area-inset-bottom) + 200rpx);
		.page-header {
			overflow: hidden;
			padding: 30rpx;
			background-color: #ebf9f7;
			.order-status {
				display: flex;
				justify-content: space-between;
				padding: 20rpx;

				.label {
					font-size: 30rpx;
				}
				.status {
					color: #31ca9d;
				}
			}
			.order-shippment {
				padding: 30rpx;
				border-radius: 20rpx;
				background-color: #fff;
				line-height: 1;
				.region {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					color: #6f6f6f;
				}
				.detail {
					margin: 24rpx 0;
					font-size: 34rpx;
					color: #121826;
				}
				.receiver {
					font-size: 26rpx;
					color: #121826;
				}
				.info {
					display: flex;
					flex-direction: column;
				}
				:deep(.navigator-wrap) {
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
				.pkg {
					font-size: 30rpx;
					color: #31ca9d;
					line-height: 1.5;
				}
				.time {
					line-height: 1.5;
					font-size: 26rpx;
					color: #6f6f6f;
				}
			}
		}
		.order-shop {
			padding: 30rpx;
			font-size: 32rpx;

			font-weight: 500;
			line-height: 1;
			color: #121826;
			.alt {
				font-size: 24rpx;
				color: #979797;
			}
		}
		.medicine-list {
			overflow: hidden;
			padding: 30rpx;
			background-color: #fff;

			.medicine-list-item {
				margin-top: 30rpx;
				border-bottom: 1px solid #f8f8f8;
				&:first-child {
					margin-top: 0;
				}
				&:last-child {
					border: none;
				}
				.content {
					display: flex;
				}

				.medicine-avator {
					width: 180rpx;
					height: 160rpx;
				}
				.medicine-info {
					display: flex;
					justify-content: space-between;
					flex: 1;
					margin-left: 15rpx;

					.info {
						margin-left: 20rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.name {
							font-size: 30rpx;
							font-weight: 500;
							color: #121826;
						}
						.number {
							padding: 10rpx 0;
							font-size: 24rpx;
							color: #979797;
							line-height: 1.5;

							&.symbol::before {
								margin-right: 20rpx;
								padding: 5rpx 10rpx;
								line-height: 1;
								content: '处方药';
								background-color: #31ca9d;
								color: #fff;
							}
						}

						.price {
							color: red;
							font-size: 32rpx;
						}
					}
					.quantity {
						font-size: 30rpx;
						color: #121826;
					}
				}
				.guide {
					padding: 20rpx;
					margin: 20rpx 0;
					background-color: #f6f6f6;
					color: #979797;
					font-size: 28rpx;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden; /* 隐藏溢出的部分 */
				}
			}
		}
		.blank {
			width: 750rpx;
			height: 40rpx;
			background-color: #f6f6f6;
		}
		:deep(.uni-icon-wrapper) {
			padding: 0 !important;
		}
		.toolbar {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			align-items: center;
			height: 128rpx;
			box-sizing: border-box;
			padding: 30rpx 40rpx calc(env(safe-area-inset-bottom) + 30rpx);
			background-color: #fff;
			.delete {
				width: 150rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 26rpx;
				color: #c3c3c5;
			}
			.buttons {
				flex: 1;
				padding: 0 30rpx;
			}
		}
	}
</style>